<template>
	<xn-form-container
		title="授权权限"
		:width="700"
		:visible="visible"
		:destroy-on-close="true"
		:show-pagination="false"
		@close="onClose"
	>
		<a-spin :spinning="spinningLoading">
			<a-tabs v-model:activeKey="activeKey">
				<a-tab-pane key="1" tab="用户授权">
					<a-transfer
						v-model:target-keys="selectedUserKeys"
						:data-source="userList"
						:titles="['待选用户', '已选用户']"
						:render="(item) => item.title"
						:show-search="true"
						:filter-option="filterOption"
						:show-select-all="false"
					/>
				</a-tab-pane>
				<a-tab-pane key="2" tab="角色授权">
					<a-transfer
						v-model:target-keys="selectedRoleKeys"
						:data-source="roleList"
						:titles="['待选角色', '已选角色']"
						:render="(item) => item.title"
						:show-search="true"
						:filter-option="filterOption"
						:show-select-all="false"
					/>
				</a-tab-pane>
			</a-tabs>
		</a-spin>
		<template #footer>
			<a-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="dashboardGrantPermission">
	import { message } from 'ant-design-vue'
	import userApi from '@/api/sys/userApi'
	import roleApi from '@/api/sys/roleApi'
	import dashboardCategorizeApi from '@/views/plugin/dashboard/api/dashboardCategorizeApi'

	const visible = ref(false)
	const spinningLoading = ref(false)
	const submitLoading = ref(false)
	const activeKey = ref('1')

	// 用户列表
	const userList = ref([])
	const selectedUserKeys = ref([])

	// 角色列表
	const roleList = ref([])
	const selectedRoleKeys = ref([])

	// 当前选中的仪表盘分类ID
	const currentDashboardId = ref('')

	// 搜索过滤
	const filterOption = (inputValue, option) => {
		return option.title.indexOf(inputValue) > -1
	}

	// 加载用户列表
	const loadUserList = async () => {
		const res = await userApi.userSelector()
		userList.value = res.map((item) => ({
			key: item.id,
			title: item.name,
			description: item.account
		}))
	}

	// 加载角色列表
	const loadRoleList = async () => {
		const res = await roleApi.roleRoleSelector()
		roleList.value = res.map((item) => ({
			key: item.id,
			title: item.name,
			description: item.category
		}))
	}

	// 加载已授权数据
	const loadGrantedData = async () => {
		spinningLoading.value = true
		try {
			const res = await dashboardCategorizeApi.grantedList({ id: currentDashboardId.value })
			selectedUserKeys.value = res.userIdList || []
			selectedRoleKeys.value = res.roleIdList || []
		} catch (error) {
			console.error('加载已授权数据失败:', error)
			selectedUserKeys.value = []
			selectedRoleKeys.value = []
		} finally {
			spinningLoading.value = false
		}
	}

	// 打开抽屉
	const open = async (dashboardId) => {
		currentDashboardId.value = dashboardId
		visible.value = true
		await Promise.all([loadUserList(), loadRoleList(), loadGrantedData()])
	}

	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		selectedUserKeys.value = []
		selectedRoleKeys.value = []
	}

	// 暴露方法
	defineExpose({
		open
	})

	// 提交表单
	const handleSubmit = async () => {
		submitLoading.value = true
		try {
			await dashboardCategorizeApi.grantPermission({
				id: currentDashboardId.value,
				userIdList: selectedUserKeys.value,
				roleIdList: selectedRoleKeys.value
			})
			message.success('授权成功')
			onClose()
		} finally {
			submitLoading.value = false
		}
	}
</script>
